<template>
  <a-layout style="min-height: 100vh">
    <!--  侧边栏开始 -->
    <a-layout-sider v-model:collapsed="collapsed" collapsible>
      <div class="logo" style="text-align: center">
        <h1><img style="width: 30px" :src="logo" alt="" /></h1>
      </div>

      <h1 style="color: #fff">{{ selectedKeys }}</h1>
      <a-menu
        @select="menuSelect"
        v-model:selectedKeys="selectedKeys"
        theme="dark"
        mode="inline"
      >
        <div v-for="(item, index) in menu">
          <a-sub-menu
            :key="item.menu_id"
            v-if="item.children && item.children.length"
          >
            <template #title>
              <span>
                <!-- <user-outlined /> -->
                <icon :icon="item.icon"></icon>

                <span>{{ item.name }}</span>
              </span>
            </template>
            <a-menu-item
              @titleClick="menuSelect(child.url)"
              v-for="child in item.children"
              :key="child.menu_id"
              :url="child.url"
              >{{ child.name }}</a-menu-item
            >
          </a-sub-menu>

          <a-menu-item :key="item.menu_id + ''" v-else :url="item.url">
            <icon :icon="item.icon"></icon>
            <span>{{ item.name }}</span>
          </a-menu-item>
        </div>
      </a-menu>
    </a-layout-sider>
    <!-- 侧边栏结束 -->
    <!--    右侧 -->
    <a-layout>
      <!-- 头部  开始 -->
      <a-layout-header class="main-header">
        <h2>欢迎</h2>

        <div class="main-header-info">
          <div>{{ nickname }}</div>
          <div class="avatar">
            <a-image :width="30" :src="avatar" />
          </div>

          <a-button @click="logout">退出</a-button>
        </div>
      </a-layout-header>
      <!-- 头部结束   -->

      <!-- 右侧主内容开始 -->
      <a-layout-content style="margin: 0 16px">
        <!-- <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item>User</a-breadcrumb-item>
          <a-breadcrumb-item>Bill</a-breadcrumb-item>
        </a-breadcrumb> -->
        <!--   他的子路由的视图 -->
        <RouterView></RouterView>
      </a-layout-content>

      <!--   主内容结束 -->
    </a-layout>
  </a-layout>
</template>
<script lang="ts" setup>
import { ref, toRefs } from 'vue'

//  获取菜单
import logo from '@/assets/logo.svg' //

import { useRouter, useRoute } from 'vue-router'

import { useMenuStore, useUserStore } from '@/stores/index'

import { removeRoute } from '@/stores/menu/addRoute'

let router = useRouter()

let route = useRoute()

let menuStore = useMenuStore()
let userStore = useUserStore()

// let userInfo = userStore.userInfo

let { avatar, nickname } = toRefs(userStore.userInfo)

console.log(avatar)

let menu = menuStore.menu as any[]

function menuSelect(e: any) {
  router.push(e.item.url)
}

let currentRouteKey = route.meta.menu_id as string

let selectedKeys = ref<string[]>([currentRouteKey])

let collapsed = ref<boolean>(false)

function logout() {
  console.log(111)
  //   本地存储清了
  localStorage.clear()
  //  状态管理的 清掉
  menuStore.$reset()
  userStore.$reset()
  //  动态路由删了
  removeRoute()

  router.replace('/login')
}
</script>
<style>
#components-layout-demo-side .logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.site-layout .site-layout-background {
  background: #fff;
}
[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}

.main-header {
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  background-color: #fff;
}
.main-header-info {
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-header-info .avatar {
  border-radius: 50%;
  margin: 0 15px;
}
</style>
